<template>
	<view class="content b-t">
		<view class="point-history" style="margin-bottom: 20upx;">
			<view class="list b-b" v-for="(item, index) in msg.awards" :key="index">
				<view class="left">
					<view class="tran-type">
						{{item.transactionDesc}}
					</view>
					<view class="tran-time">
						{{item.createDate}}
					</view>
				</view>
				<view class="right">
					
					<view class="point-plus" >
						+{{item.transactionAmount}}
					</view>
					<view class="balance">
						{{item.isAccounted==0?"待结算":"已结算"}}
					</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="status" />
	</view>

</template>

<script>
	export default {
		data() {
			return {
				msg:"",
				status: 'loadmore',
				page: 0,
				pageSize:10
			}
		},
		methods: {
			searchUserAwardList(startIndex,pageSize){
				var postData = {
					startIndex:startIndex,
					pageSize: pageSize,
					userUuid:this.$store.state.userInfo.userUuid,
					transactionType:'推荐商家奖金',
				}
				
				postData.keyArray=['TRANSACTIONTYPE','USER'];
				
				console.log(postData)
				
				this.$api.request.searchUserAwardList(postData,(res)=>{
					console.log(res)
					
					this.msg=res.body.data;
					if(this.msg.total<10){
						this.status = 'nomore';
					}
					console.log(this.msg)
				})
				console.log(111)
			}
		},
		mounted() {
			this.searchUserAwardList(this.page,this.pageSize);
		},
		onReachBottom() {
			
			if(this.page*10 > this.msg.total) {
				this.status = 'nomore';
				return
			}else{
				this.page = ++ this.page;
				this.status = 'loading';
				this.pageSize=this.pageSize+10;
				this.searchMerchantList(this.page,this.pageSize);
			}
			

		}
	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 120upx;
		background: #f8f8f8;
	}

	.content {
		position: relative;
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 30upx;
		;
		background: #fff;
		position: relative;
		.amount{
			color: $base-color
		}
		.apply{
			color: #fff;
			border-radius: 10px;
			background: linear-gradient(left, #f5cb54, #9e760d);
			width: 80px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
		}
	}

	.left {
		text-align: left;
		.tran-type {
			font-size: $font-base;
			color: $font-color-dark;
		}
		
		.tran-time{
			font-size: $font-base;
			color: $font-color-light;
			padding-top:20upx;
		}
	}
	.right {
		text-align: right;
		.point-plus {
			font-size: $font-lg;
			color: #D47169;
		}
		.point-minus {
			font-size: $font-lg;
			color: green
		}
		.balance{
			font-size: $font-base;
			color: $font-color-light;
			padding-top:20upx;
		}
	}
	

	.icon-bianji {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}
	.point-history{
		margin-top: 10upx;
	}
</style>